<template>
	<view>
		<view class="header">
			<view style="display: flex;">
				<view style="padding-top: 100rpx;padding-left: 15rpx;display: flex;">
					<u-avatar :src="src" @click="gome"></u-avatar> 
					<p style="padding-left: 15rpx;padding-top: 10rpx;" @click="gome">风萧萧兮</p>
				</view>
				<view style="padding-top: 100rpx;padding-left: 320rpx;display: flex;">
					<image src="../../static/icos/setting.png" style="width: 60rpx;height: 60rpx;"></image>
					<image src="../../static/icos/scan.png" style="width: 60rpx;height: 60rpx;"></image>
				</view>
			</view>
		</view>
		<view class="middle">
			<view style="display: flex;padding-top: 20rpx;">
				<image src="../../static/icos/1.png" style="width: 80rpx;height: 80rpx;padding-left: 120rpx;"></image>
				<image src="../../static/icos/2.png" style="width: 80rpx;height: 80rpx;padding-left: 120rpx;" @click="collect()"></image>
				<image src="../../static/icos/3.png" style="width: 80rpx;height: 80rpx;padding-left: 120rpx;" @click="download()"></image>
			</view>
			<view  style="display: flex;padding-top: 20rpx;">
				<span style="padding-left: 100rpx;" @click="">历史记录</span>
				<span style="padding-left: 80rpx;" @click="collect()">我的收藏</span>
				<span style="padding-left: 100rpx;" @click="download()">下载</span>
			</view>
		</view>
		<view class="footer">
			<view >
				<u-list >
					<u-list-item v-for="(item, index) in indexList" :key="index" >
						<u-cell :title="item.title" isLink url="/pages/componentsB/badge/badge" titleStyle="color:white" >
							<u-avatar
								slot="icon"
								shape="square"
								size="20"
								:src="item.url"
								customStyle="margin: -3px 5px -3px 0"
							></u-avatar>
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<Tabbar :current="'4'"></Tabbar>
	</view>
	
</template>

<script>
import Tabbar from '../../components/tabbar/tabbar.vue'
	export default {
		data() {
			return {
				movieName:'',
				src: '/static/carousel/batmanvssuperman.png',
				indexList: [
					{ url:'/static/icos/edit.png',urls:'',title:'我要反馈' },
					{ url:'/static/icos/delete.png',urls:'' ,title:'清除缓存'   },
					{ url:'/static/icos/about.png',urls:'' ,title:'关于我们'   },
					{ url:'/static/icos/share.png',urls:'' ,title:'我要分享'  },
					
				],
				welList:[
					{
						id:'1',
						img:'/static/poster/civilwar.jpg'
					},
					{
						id:'2',
						img:'/static/poster/justice.png'
					},
					{
						id:'3',
						img:'/static/poster/aladdin.png'
					},
				],
			}
		},
		components: {
			Tabbar
		}, 
		onReachBottom() {
			
		},
		onLoad() {
	
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
		},
		methods: {
			download(){
				console.log(1); //tabBar页面为pages.json中"tabBar"中配置的页面，如果是则应该使用uni.switchTab跳转。
				uni.switchTab({
					url:"/pages/download/download"
				})
			},
			collect(){
				uni.switchTab({
					url:"/pages/save/save"
				})
			},
			gome(){
				uni.navigateTo({
					url:"/pages/meInfo/meInfo"
				})
			}
		}
	}
</script>

<style>
page{
	background: linear-gradient(to bottom,#06041F,#06041F);
	color: white;
}
.header{
	/* background-image: url("../../static/background/header.png"); */
	background:url("../../static/background/header.png") no-repeat;
	height: 300rpx;
	
	margin: 0 auto;
}
.middle{
	background-image: url("../../static/background/middle.png");
	height: 200rpx;
	width: 92%;
	margin: 0 auto;
	padding-bottom: 100rpx;
}
.footer{
	
	background-image: url("../../static/background/footer.png");
	height: 320rpx;
	width: 92%;
	margin: 0 auto;
}
</style>
